<template>
  <div class="search-result">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleListItem v-for="v in list" :key="v.art_id" :article="v" />
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    </van-list>
  </div>
</template>

<script>
import ArticleListItem from '@/views/Home/components/ArticleListItem/index'
export default {
  name: 'SearchResult',
  components: { ArticleListItem },
  props: {
    kw: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      articleObj: {
        art_id: '8212',
        title: 'Web Bundler CheatSheet, 选择合适的构建打包工具',
        aut_id: '1111',
        comm_count: 3,
        pubdate: '2019-03-11 09:00:00',
        aut_name: '黑马程序员(改不了)',
        is_top: 0,
        // cover: { type: 0 },
        // cover: {
        //   type: 1,
        //   images: [
        //     'https://portrait.gitee.com/uploads/avatars/user/660/1980100_andremao_1578963587.png!avatar200',
        //   ],
        // },
        cover: {
          type: 3,
          images: [
            'http://toutiao.itheima.net/resources/images/45.jpg',
            'http://toutiao.itheima.net/resources/images/22.jpg',
            'http://toutiao.itheima.net/resources/images/49.jpg',
          ],
        },
      },
      page: 1, // 页码
      perPage: 10, // 每页条数
      list: [],
      loading: false,
      finished: false,
    }
  },
  methods: {
    async onLoad() {
      const res = await this._apis.search.getSearchResults({
        page: this.page,
        perPage: this.perPage,
        q: this.kw,
      })

      // 请求完后，让当前页码 +1，下次再触发 onLoad 时，就是获取的下一页数据
      this.page++

      const { results } = res.data.data

      this.list.push(...results)

      this.loading = false

      if (results.length === 0) {
        this.finished = true
      }
    },
  },
}
</script>

<style scoped lang="less"></style>
